<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <h:outputStylesheet library="css" name="menuStyle.css" />
        <h:outputScript library="js" name="menuDynamic.js" />
        <title>Menu</title>
    </h:head>

    <h:body class="oneColLiqCtr">
        <div id="mnu_container">
            <div id="mnu_mainContent">
                <div id="menuContainer"  style="width:100%; margin:0 auto">
                    <div id="img_div" style="width:40%; float:left;">
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                        <p>&nbsp;</p>
                    </div>
                    <div id="left_menu_div" style="width:30%; height:100%; float:left; display: block;">
                        <!-- Administracion Cuenta de Usuario -->
                        <ul style="margin:0; padding:0; list-style-type:none; padding-bottom:20px;">
                            <li>
                                <div id="lm_title_top" style="width:100%; margin:0 auto; color:#DDD; font-size:120%; padding-bottom: 2px;">Administracion Cuenta</div>
                            </li>
                            <li class="li_cls">
                                <div id="lm_mnuItm_vp" class="mnuItemDiv">
                                    <a href="#" id="vp_lnk" class="mnuItmLink" onmouseover="turnLink('vp_lnk', true)" onmouseout="turnLink('vp_lnk', false)">Ver Perfil</a>
                                </div>
                            </li>
                            <li class="li_cls">
                                <div id="lm_title"  class="mnuItemDiv">
                                    <a href="#" id="cc_lnk" class="mnuItmLink" onmouseover="turnLink('cc_lnk', true)" onmouseout="turnLink('cc_lnk', false)">Cambiar Contraseña</a>
                                </div>
                            </li>
                            <li class="li_cls">
                                <div id="lm_title"  class="mnuItemDiv">
                                    <a href="#" id="cprs_lnk" class="mnuItmLink" onmouseover="turnLink('cprs_lnk', true)" onmouseout="turnLink('cprs_lnk', false)">Editar Pregunta/Respuesta Seguridad</a>
                                </div>
                            </li>
                            <li class="li_cls">
                                <div id="lm_title"  class="mnuItemDiv">
                                    <a href="#" id="evc_lnk" class="mnuItmLink" onmouseover="turnLink('evc_lnk', true)" onmouseout="turnLink('evc_lnk', false)">Editar Vigencia Contraseña</a>
                                </div>
                            </li>

                        </ul>
                        <!-- Administracion Datos Personales -->
                        <ul style="margin:0; padding:0; list-style-type:none; padding-bottom:20px;">
                            <li>
                                <div id="lm_title_cnt" style="width:100%; margin:0 auto; color:#DDD; font-size:120%; padding-bottom: 2px;">Datos Personales</div>
                            </li>
                            <li class="li_cls">
                                <div id="lm_mnuItm_vedp" class="mnuItemDiv">
                                    <a href="#" id="vedp_lnk" class="mnuItmLink" onmouseover="turnLink('vedp_lnk', true)" onmouseout="turnLink('vedp_lnk', false)">Ver/Editar Datos Personales</a>
                                </div>
                            </li>
                            <li class="li_cls">
                                <div id="lm_mnuItm_vece" class="mnuItemDiv">
                                    <a href="#" id="vece_lnk" class="mnuItmLink" onmouseover="turnLink('vece_lnk', true)" onmouseout="turnLink('vece_lnk', false)">Ver/Editar Contacto(s) Emergencia</a>
                                </div>
                            </li>
                        </ul>

                        <!-- Academica -->
                        <ul style="margin:0; padding:0; list-style-type:none; padding-bottom:20px;">
                            <li>
                                <div id="lm_title_btm" style="width:100%; margin:0 auto; color:#DDD; font-size:120%; padding-bottom: 2px;">Academica</div>
                            </li>
                            <li class="li_cls">
                                <div id="lm_mnuItm_ci" class="mnuItemDiv">
                                    <a href="#" id="ci_lnk" class="mnuItmLink" onmouseover="turnLink('ci_lnk', true)" onmouseout="turnLink('ci_lnk', false)">Calendario Inscripcion</a>
                                </div>
                            </li>
                            <li class="li_cls">
                                <div id="lm_mnuItm_hi" class="mnuItemDiv">
                                    <a href="#" id="hi_lnk" class="mnuItmLink" onmouseover="turnLink('hi_lnk', true)" onmouseout="turnLink('hi_lnk', false)">Hacer Inscripcion</a>
                                </div>
                            </li>
                            <li class="li_cls">
                                <div id="lm_mnuItm_hisi" class="mnuItemDiv">
                                    <a href="#" id="hisi_lnk" class="mnuItmLink" onmouseover="turnLink('hisi_lnk', true)" onmouseout="turnLink('hisi_lnk', false)">Historico Inscripciones</a>
                                </div>
                            </li>
                            <li class="li_cls">
                                <div id="lm_mnuItm_si" class="mnuItemDiv">
                                    <a href="#" id="si_lnk" class="mnuItmLink" onmouseover="turnLink('si_lnk', true)" onmouseout="turnLink('si_lnk', false)">Status Inscripcion</a>
                                </div>
                            </li>
                            <li class="li_cls">
                                <div id="lm_mnuItm_rc" class="mnuItemDiv">
                                    <a href="#" id="rc_lnk" class="mnuItmLink" onmouseover="turnLink('rc_lnk', true)" onmouseout="turnLink('rc_lnk', false)">Retiro Curso/Carrera</a>
                                </div>
                            </li>
                            <li class="li_cls">
                                <div id="lm_mnuItm_ccal" class="mnuItemDiv">
                                    <a href="#" id="ccal_lnk" class="mnuItmLink" onmouseover="turnLink('ccal_lnk', true)" onmouseout="turnLink('ccal_lnk', false)">Consulta Calificaciones</a>
                                </div>
                            </li>
                        </ul>

                        <p>&nbsp;</p>
                    </div>
                    <div id="right_menu_div" style="width:30%; float:left;">
                        <!-- Administracion Financiera -->
                        <ul style="margin:0; padding:0; list-style-type:none; padding-bottom:32px;">
                            <li>
                                <div id="rm_title_top" style="width:100%; margin:0 auto; color:#DDD; font-size:120%; padding-bottom: 2px;">Financiera</div>
                            </li>
                            <li class="li_cls">
                                <div id="lr_mnuItm_hp" class="mnuItemDiv">
                                    <a href="#" id="hp_lnk" class="mnuItmLink" onmouseover="turnLink('hp_lnk', true)" onmouseout="turnLink('hp_lnk', false)">Hacer Pago</a>
                                </div>
                            </li>
                            <li class="li_cls">
                                <div id="rm_mnuItm_hisp"  class="mnuItemDiv">
                                    <a href="#" id="hisp_lnk" class="mnuItmLink" onmouseover="turnLink('hisp_lnk', true)" onmouseout="turnLink('hisp_lnk', false)">Historico Pago</a>
                                </div>
                            </li>
                            <li class="li_cls">
                                <div id="rm_mnuItm_ref"  class="mnuItemDiv">
                                    <a href="#" id="ref_lnk" class="mnuItmLink" onmouseover="turnLink('ref_lnk', true)" onmouseout="turnLink('ref_lnk', false)">Reporte Estado Financiero</a>
                                </div>
                            </li>
                        </ul>

                        <!-- Otros/General -->
                        <ul style="margin:0; padding:0; list-style-type:none; padding-bottom:20px;">
                            <li>
                                <div id="rm_title_cnt" style="width:100%; margin:0 auto; color:#DDD; font-size:120%; padding-bottom: 2px;">De Interes</div>
                            </li>
                            <li class="li_cls">
                                <div id="rm_mnuItm_ijr" class="mnuItemDiv">
                                    <a href="#" id="ijr_lnk" class="mnuItmLink" onmouseover="turnLink('ijr_lnk', true)" onmouseout="turnLink('ijr_lnk', false)">Instituto Jose Reyes</a>
                                </div>
                            </li>
                            <li class="li_cls">
                                <div id="lm_mnuItm_cso" class="mnuItemDiv">
                                    <a href="#" id="cso_lnk" class="mnuItmLink" onmouseover="turnLink('cso_lnk', true)" onmouseout="turnLink('cso_lnk', false)">Carreras/Cursos</a>
                                </div>
                            </li>
                            <li class="li_cls">
                                <div id="lm_mnuItm_ms" class="mnuItemDiv">
                                    <a href="#" id="ms_lnk" class="mnuItmLink" onmouseover="turnLink('ms_lnk', true)" onmouseout="turnLink('ms_lnk', false)">Mapa del Sitio</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                    <p>&nbsp;</p>
                </div>
                <p>&nbsp;</p>
                <!-- end #mainContent --></div>
            <!-- end #container --></div>
    </h:body>
</html>
